﻿@{
    ViewBag.Title = "JQTree";
    Layout = "~/Views/Share/_Layout.cshtml";
}

@section css{
    <link href="~/Content/jqtree/jqtree.css" rel="stylesheet" />
}

@section head{
        
        <div class="col-sm-4">
            <ol class="breadcrumb">
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a href="/">UI&控件</a>
                </li>
                <li class="active">
                    <strong>JQuery Tree</strong>
                </li>
            </ol>
        </div>

}

<div class="row">
    <div class="col-md-3" style="padding:0px;">
        <div class="panel panel-primary">
            <div class="panel-heading">Organization Tree</div>
            <div id="tree1" class="h6"></div>
            <div class="panel-body">
            </div>
        </div>
        
    </div>
    <div class="col-md-9" style="padding-right:0px;">        
        <div class="panel panel-primary">
            <div class="panel-heading"><strong id="panel-operate-title">组织管理 - Organization Manager</strong></div>
            <div class="panel-body h6" style="margin:0px;" id="panel-dept-form">
                <div class="col-sm-6">
                    <div class="form-horizontal">
                        <input type="hidden" id="txtDeptID" />
                        <input type="hidden" id="txtLevelNumber" />
                        <input type="hidden" id="txtOrderNumber" />
                        <input type="hidden" id="txtStatus" />
                        <input type="hidden" id="txtParentID" />
                        <input type="hidden" id="txtThirdPartID" />
                        <input type="hidden" id="txtDeptType" />

                        <div class="form-group" id="panel-pre-dept">
                            <label for="txtPreDeptName" class="col-sm-2 control-label">上级部门</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="txtPreDeptName" placeholder="上级" readonly="readonly" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtDeptName" class="col-sm-2 control-label">部门名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="txtDeptName" placeholder="财务部" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtDeptCode" class="col-sm-2 control-label">部门编号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="txtDeptCode" placeholder="CW001" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="txtRemark" class="col-sm-2 control-label">描述</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" id="txtRemark"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="btnSaveDept" class="col-sm-2 control-label"></label>
                            <div class="col-sm-10">
                                <button id="btnSaveDept" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body h6" style="margin:0px;padding:0px;" id="panel-dept-grid">
                <div class="col-sm-12" style="padding:0px;">
                    <div id="PanelDeptGrid"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script src="~/Content/jqtree/tree.jquery.js"></script>
    <script src="~/Content/grid/src/noke.grid.v1.2.js"></script>
    <script>
        $(function () {

            new tree();

        });

        function tree() {
            var thisobj = this;
            this.$tree = $('#tree1');
            this.target = 'DIV';
            this.deptobj = null;
            this.init = function () {
                var data = [convertToTree(org)];
                this.$tree.tree({
                    data: data,
                    autoOpen: 1,
                    onCreateLi: function (node, $li) {
                        var edit = '&nbsp;&nbsp;&nbsp;', args = ['plus', 'edit', 'trash', 'user', '添加', '编辑', '删除', '用户'];
                        for (var i = 0; i < 4; i++) {
                            if (((i == 1 || i == 2) && node.id == 0) || (i == 2 && node.children.length > 0)) { continue; }
                            edit += '<a hraf="#node-' + node.id + '" data-node-id="' + node.id + '" class="btn btn-link btn-xs" aria-label="' + args[i + 4] + '"><span class="glyphicon glyphicon-' + args[i] + '" aria-hidden="true"></span></a>';
                        }
                        $li.find('.jqtree-element').append(edit);
                    }
                }).bind('tree.click', function (e) { operate(e, 'item'); })
                .on('click', '.glyphicon-plus', function (e) { operate(e, 'add'); })
                .on('click', '.glyphicon-edit', function (e) { operate(e, 'edit'); })
                .on('click', '.glyphicon-trash', function (e) { operate(e, 'delete'); })
                .on('click', '.glyphicon-user', function (e) { operate(e, 'user'); });
                this.deptobj = new dept(null);
            }
            function operate(e, type) {
                if (type == 'item') {
                    if (thisobj.target != e.target.nodeName) {
                        thisobj.target = e.target.nodeName; // e.target.nodeName=='DIV'
                        return true;
                    }
                    thisobj.deptobj.Set(e.node);
                    thisobj.deptobj.Grid();
                } else {
                    thisobj.target = e.target.nodeName; // e.target.nodeName=='SPAN'
                    var $a = $(e.target).parent(), node_id = $a.data('node-id');
                    var node = thisobj.$tree.tree('getNodeById', node_id);
                    if (node) {
                        thisobj.deptobj.Set(node);
                        switch (type) {
                            case 'add': thisobj.deptobj.FormAdd(); break;
                            case 'edit': thisobj.deptobj.FormEdit(); break;
                            case 'delete': thisobj.deptobj.Delete(); break;
                            case 'user': User(node); break;
                        }
                    }
                }
            }

            // ****将部门转换成树形结构 【BEGIN】***********************************************
            function convertToTree(org) {
                var root = { id: 0, label: 'Root', DeptID: 0, DeptCode: 'ROOT', DeptName: 'Root', ParentID: -1, DeptType: 0, LevelNumber: 0, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: 'Root', children: [] };
                var levels = org;
                var len = levels.length;
                var temp = {}, key = '', depts = [], dept = null, parent = null;
                for (var level = 0; level < len; level++) {
                    depts = levels[level];
                    for (var i = 0; i < depts.length; i++) {
                        dept = depts[i];
                        parent = (level == 0) ? root : getParent(temp, dept.ParentID, root);
                        if (!parent || (parent.id == 0 && level != 0)) {
                            continue;
                        }
                        key = dept.DeptID;
                        temp[key] = (level == 0 ? '' : (temp[dept.ParentID] + '-')) + parent.children.length;
                        dept.children = [];
                        parent.children.push(dept);
                    }
                }
                return root;
            }
            function getParent(temp, pid, root) {
                if (temp[pid]) {
                    var ptemp = temp[pid].toString().split('-');
                    var parent = root;
                    $(ptemp).each(function (i, index) {
                        parent = parent.children[parseInt(index)];
                    })
                    return parent;
                }                
                return null;
            }
            // ****************** 【END】********************************

            this.init();
        }

        function dept(obj) {
            var thisobj = this;
            this.current = obj;
            this.init = function () {
                $('#panel-pre-dept,#panel-dept-form,#panel-dept-grid').hide();
                $('#btnSaveDept').click(function () { thisobj.Save(); });
            }
            this.Set = function (obj) { this.current = obj; };
            this.FormAdd = function () {
                var model = this.current;
                $('#txtParentID').val(model.DeptID);
                $('#txtLevelNumber').val(model.LevelNumber + 1);
                $('#txtOrderNumber').val(model.OrderNumber+2);
                $('#txtDeptType').val(model.DeptType);                
                $('#txtDeptID').val(0);
                $('#txtThirdPartID').val(0);
                $('#txtStatus').val(1);
                $('#txtDeptName').val('');
                $('#txtDeptCode').val('');
                $('#txtRemark').val('');
                $('#txtPreDeptName').val(model.DeptName + '-' + model.DeptID);
                $('#panel-dept-grid').hide();
                $('#panel-pre-dept,#panel-dept-form').show();
                $('#panel-operate-title').text('添加部门');
            }
            this.FormEdit = function () {
                var model = this.current;
                $('#txtDeptID').val(model.DeptID);
                $('#txtLevelNumber').val(model.LevelNumber);
                $('#txtOrderNumber').val(model.OrderNumber);
                $('#txtStatus').val(model.Status);
                $('#txtParentID').val(model.ParentID);
                $('#txtThirdPartID').val(model.ThirdPartID);
                $('#txtDeptType').val(model.DeptType);
                $('#txtDeptName').val(model.DeptName);
                $('#txtDeptCode').val(model.DeptCode);
                $('#txtRemark').val(model.Remark);
                $('#panel-pre-dept,#panel-dept-grid').hide();
                $('#txtPreDeptName').val('');
                $('#panel-dept-form').show();
                $('#panel-operate-title').text('编辑部门');
            }
            this.Delete = function () {
                $('#panel-pre-dept,#panel-dept-grid,#panel-dept-form').hide();
                $('#panel-operate-title').text('组织管理 - Organization Manager');
                var model = this.current;
                if (!confirm('您确定要删除【' + model.DeptName + '】吗？')) {
                    return false;
                }

                // delete
            }
            this.Save = function () {
                var model = {};
                model.DeptID = $('#txtDeptID').val();
                model.LevelNumber = $('#txtLevelNumber').val();
                model.OrderNumber = $('#txtOrderNumber').val();
                model.Status = $('#txtStatus').val();
                model.ParentID = $('#txtParentID').val();
                model.ThirdPartID = $('#txtThirdPartID').val();
                model.DeptType = $('#txtDeptType').val();
                model.DeptName = $('#txtDeptName').val();
                model.DeptCode = $('#txtDeptCode').val();
                model.Remark = $('#txtRemark').val();
            }

            this.Grid = function () {
                var model = this.current;
                $('#panel-dept-form').hide();
                if (model.children.length <= 0) { return false; }

                var setting = ChildDeptSetting();
                setting.data = model.children;
                $('#setting.id').grid(setting);
                $('#panel-dept-grid').show();
                $('#panel-operate-title').text('组织管理 - Organization Manager');
            }

            function ChildDeptSetting() {

                var setting = { id: "PanelDeptGrid", key: "DeptID", title: {}, cols: [], toolbar: {}, rowindex: false, checkbox: true, data: [], rowbind: null };
                setting.cols.push({ key: "DeptID", type: "string", width: 50, label: "ID" });
                setting.cols.push({ key: "DeptName", type: "string", width: 80, label: "Name" });
                setting.cols.push({ key: "DeptCode", type: "string", width: 80, label: "Code" });
                setting.cols.push({ key: "LevelNumber", type: "string", width: 80, label: "LevelNumber" });
                setting.cols.push({ key: "OrderNumber", type: "string", width: 60, label: "OrderNumber" });
                setting.cols.push({ key: "Status", type: "string", width: 60, label: "Status" });
                setting.cols.push({ key: "ParentID", type: "string", width: 60, label: "ParentID" });
                setting.cols.push({ key: "ThirdPartID", type: "string", width: 60, label: "ThirdPartID" });
                setting.cols.push({ key: "DeptType", type: "string", width: 60, label: "DeptType" });
                setting.cols.push({ key: "Remark", type: "string", width: 60, label: "Remark" });

                setting.rowbind = function (i, model) {
                    //model['operate-delete'] = '<a href="#" class="operate-delete" bind-id="' + model.ID + '"><span class="label label-danger">Delete</span></a>&nbsp;<a href="#" class="operate-modify" bind-id="' + model.ID + '"><span class="label label-primary">Modify</span></a>';
                    //model.ID = '<a href="#">' + model.ID + '</a>';
                    //model.Summary = model.Summary + i;
                };
                return setting;
            }


            this.init();

        }




        var level1 = [];
        level1.push({ id: 1, label: '总经理', DeptID: 1, DeptCode: '', DeptName: '总经理', ParentID: 0, DeptType: 0, LevelNumber: 1, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });

        var level2 = [];
        level2.push({ id: 2, label: '总工程师', DeptID: 2, DeptCode: '', DeptName: '总工程师', ParentID: 1, DeptType: 0, LevelNumber: 2, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level2.push({ id: 3, label: '营销副总', DeptID: 3, DeptCode: '', DeptName: '营销副总', ParentID: 1, DeptType: 0, LevelNumber: 2, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level2.push({ id: 4, label: '生产副总', DeptID: 4, DeptCode: '', DeptName: '生产副总', ParentID: 1, DeptType: 0, LevelNumber: 2, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level2.push({ id: 5, label: '行政', DeptID: 5, DeptCode: '', DeptName: '行政', ParentID: 1, DeptType: 0, LevelNumber: 2, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level2.push({ id: 6, label: '财务', DeptID: 6, DeptCode: '', DeptName: '财务', ParentID: 1, DeptType: 0, LevelNumber: 2, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });

        var level3 = [];
        level3.push({ id: 51, label: '行政办公', DeptID: 51, DeptCode: '', DeptName: '行政办公', ParentID: 5, DeptType: 0, LevelNumber: 3, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level3.push({ id: 52, label: '人力资源', DeptID: 52, DeptCode: '', DeptName: '人力资源', ParentID: 5, DeptType: 0, LevelNumber: 3, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level3.push({ id: 53, label: '后勤总务', DeptID: 53, DeptCode: '', DeptName: '后勤总务', ParentID: 5, DeptType: 0, LevelNumber: 3, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level3.push({ id: 41, label: '生产管理部', DeptID: 41, DeptCode: '', DeptName: '生产管理部', ParentID: 4, DeptType: 0, LevelNumber: 3, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level3.push({ id: 42, label: '品质管理部', DeptID: 42, DeptCode: '', DeptName: '品质管理部', ParentID: 4, DeptType: 0, LevelNumber: 3, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level3.push({ id: 61, label: '会计出纳', DeptID: 61, DeptCode: '', DeptName: '会计出纳', ParentID: 6, DeptType: 0, LevelNumber: 3, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level3.push({ id: 62, label: '统计核算', DeptID: 62, DeptCode: '', DeptName: '统计核算', ParentID: 6, DeptType: 0, LevelNumber: 3, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level3.push({ id: 21, label: '技术中心', DeptID: 21, DeptCode: '', DeptName: '技术中心', ParentID: 2, DeptType: 0, LevelNumber: 3, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level3.push({ id: 31, label: '营销中心', DeptID: 31, DeptCode: '', DeptName: '营销中心', ParentID: 3, DeptType: 0, LevelNumber: 3, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });

        var level4 = [];
        level4.push({ id: 211, label: '工程技术部', DeptID: 211, DeptCode: '', DeptName: '工程技术部', ParentID: 21, DeptType: 0, LevelNumber: 4, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level4.push({ id: 212, label: '分析仪器开发部', DeptID: 212, DeptCode: '', DeptName: '分析仪器开发部', ParentID: 21, DeptType: 0, LevelNumber: 4, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level4.push({ id: 213, label: '微波通信开发部', DeptID: 213, DeptCode: '', DeptName: '微波通信开发部', ParentID: 21, DeptType: 0, LevelNumber: 4, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level4.push({ id: 214, label: '铁路通信开发部', DeptID: 214, DeptCode: '', DeptName: '铁路通信开发部', ParentID: 21, DeptType: 0, LevelNumber: 4, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level4.push({ id: 311, label: '分析仪器市场部', DeptID: 311, DeptCode: '', DeptName: '分析仪器市场部', ParentID: 31, DeptType: 0, LevelNumber: 4, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level4.push({ id: 312, label: '微波通信市场部', DeptID: 312, DeptCode: '', DeptName: '微波通信市场部', ParentID: 31, DeptType: 0, LevelNumber: 4, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level4.push({ id: 313, label: '铁路通信市场部', DeptID: 313, DeptCode: '', DeptName: '铁路通信市场部', ParentID: 31, DeptType: 0, LevelNumber: 4, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level4.push({ id: 314, label: '综合服务部', DeptID: 314, DeptCode: '', DeptName: '综合服务部', ParentID: 31, DeptType: 0, LevelNumber: 4, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level4.push({ id: 411, label: '生产车间', DeptID: 411, DeptCode: '', DeptName: '生产车间', ParentID: 41, DeptType: 0, LevelNumber: 4, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level4.push({ id: 412, label: '物控仓库', DeptID: 412, DeptCode: '', DeptName: '物控仓库', ParentID: 41, DeptType: 0, LevelNumber: 4, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level4.push({ id: 413, label: '采购外协', DeptID: 413, DeptCode: '', DeptName: '采购外协', ParentID: 41, DeptType: 0, LevelNumber: 4, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level4.push({ id: 421, label: '检验与验证', DeptID: 421, DeptCode: '', DeptName: '检验与验证', ParentID: 42, DeptType: 0, LevelNumber: 4, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level4.push({ id: 422, label: '计量仪器', DeptID: 422, DeptCode: '', DeptName: '计量仪器', ParentID: 42, DeptType: 0, LevelNumber: 4, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });
        level4.push({ id: 423, label: '维修服务', DeptID: 423, DeptCode: '', DeptName: '维修服务', ParentID: 42, DeptType: 0, LevelNumber: 4, OrderNumber: 0, ThirdPartID: '', Status: 0, Remark: '' });

        var org = [level1, level2, level3, level4];

    </script>

}